<template>
  <div class="box">
    <van-nav-bar title="演出" left-arrow @click-left="onClickLeft" class="header">
      <template #right>
        <van-icon name="ellipsis" @click="showMark" />
      </template>
    </van-nav-bar>
    <van-overlay :show="show">
      <div class="wrapper" @click="closeMark">
        <div class="block">
          <div @click="goHome">
            <van-icon name="wap-home-o" class="block_icon" />
            <span>主页</span>
          </div>
          <div @click="goUser">
            <van-icon name="contact" class="block_icon" />
            <span>我的聚橙</span>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-tabs v-model="activeName" @click="kindTitleChecked(activeName)">
      <van-tab v-for="(item, index) in kindTitleList" :key="index" :title="item" :name="item">
        <!-- <div v-for="(itm, idx) in kindDataList" :key="idx">{{itm.type}}</div> -->
        <van-loading size="0.24rem" v-if="loadingBool">加载中...</van-loading>
        <ul class="kindData" v-else>
          <li v-for="(itm, idx) in kindDataList" :key="idx" @click="goDetail(itm.proid)">
            <img :src="itm.pic" alt="" class="pic">
            <span class="city">{{itm.city_name}}</span>
            <div>
              <p>
                <img v-show="itm.method === 1" src="https://image.juooo.com/upload/i.png" alt="">
                {{itm.name}}
              </p>
              <span>{{itm.start_show_time.substring(0,10)}}&nbsp;{{itm.show_time_bottom}}&nbsp;{{itm.start_show_time.substring(11,16)}}</span>
              <span>{{'￥' + itm.min_price}}&nbsp;&nbsp;<b>起</b></span>
              <span><b>{{itm.support_desc}}</b></span>
            </div>
          </li>
        </ul>
      </van-tab>
      <!-- <van-tab title="全部" name="全部">全部</van-tab>
      <van-tab title="演唱会" name="演唱会">演唱会</van-tab>
      <van-tab title="音乐会" name="音乐会">音乐会</van-tab>
      <van-tab title="舞台剧" name="舞台剧">舞台剧</van-tab>
      <van-tab title="儿童剧" name="儿童剧">儿童剧</van-tab>
      <van-tab title="音乐剧" name="音乐剧">音乐剧</van-tab>
      <van-tab title="戏剧综艺" name="戏剧综艺">戏剧综艺</van-tab>
      <van-tab title="展览" name="展览">展览</van-tab>
      <van-tab title="舞蹈芭蕾" name="舞蹈芭蕾">舞蹈芭蕾</van-tab> -->
    </van-tabs>
    <div class="goTop" @click="goTop" v-if="goTopShow">
      <img class="goTop_pic" src="" alt="">
      <!-- <van-icon name="arrow-up" class="goTop_icon" /> -->
      <!-- <p>返回顶部</p> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, NavBar, Overlay, Tab, Tabs, Sticky, List, Loading } from 'vant'
import { getKindList, getKindAllList } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Overlay)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(List)
Vue.use(Sticky)
Vue.use(Loading)
export default {
  data () {
    return {
      show: false,
      kindTitleList: ['全部', '演唱会', '音乐会', '舞台剧', '儿童剧', '音乐剧', '戏剧综艺', '展览', '舞蹈芭蕾'],
      activeName: '全部', // 默认请求全部
      kindDataList: [],
      loading: false,
      finished: false,
      count: 1,
      loadingBool: true,
      goTopShow: false
    }
  },
  // 钩子函数
  mounted () {
    // 获取到从url中得到的参数判断一下
    // console.log(this.$route.params)
    const { type } = this.$route.params
    this.activeName = type
    setTimeout(() => {
      this.loadingBool = false
    }, 500)
    getKindList({ type: this.activeName }).then(res => {
      this.kindDataList = res.data.data
    })
    // 解决路由传参跳转不在头部问题！！
    this.$router.afterEach(() => {
      window.scrollTo(0, 0)
    })
    window.addEventListener('scroll', this.scrollToTop)
  },
  // 计算属性
  methods: {
    scrollToTop () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 2400) {
        this.goTopShow = true
      } else {
        this.goTopShow = false
      }
    },
    goTop () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    showMark () {
      this.show = true
    },
    closeMark () {
      this.show = false
    },
    goHome () {
      this.$router.push('/home')
    },
    goUser () {
      if (localStorage.getItem('loginState') !== 'ok') {
        this.$router.push('/login')
      } else {
        this.$router.push('/user')
      }
    },
    kindTitleChecked (item) {
      this.loadingBool = true
      setTimeout(() => {
        this.loadingBool = false
      }, 500)
      this.activeName = item
      if (this.activeName === '全部') {
        getKindAllList().then(res => {
          this.kindDataList = res.data.data
        })
      } else {
        getKindList({ type: this.activeName }).then(res => {
          this.kindDataList = res.data.data
        })
      }
    },
    goDetail (data) {
      this.$router.push({ path: '/detail', query: { proid: data } })
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 100;
  background: white!important;
}
.wrapper {
  display: flex;
  position: relative;
  height: 100%;
}
.block {
  width: 1.4rem;
  height: 0.9rem;
  position: absolute;
  top: 0.44rem;
  right: 0.05rem;
  border-radius: 0.05rem;
  background-color: #fff;
  div {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    .block_icon {
      font-size: 0.2rem;
      margin: 0 0.13rem;
      float: left;
      margin-top: 0.1rem;
    }
    span {
      float: left;
    }
  }
  div:nth-of-type(1) {
    border-bottom: 1px solid #f2f2f2;
  }
}
.kindData {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding: 0.1rem 0.15rem;
  overflow: hidden;
  li {
    width: 49%;
    /* height: 3.68rem; */
    height: auto;
    border-radius: 0.04rem;
    overflow: hidden;
    float: left;
    margin-bottom: 0.08rem;
    background: #f5f5f5;
    position: relative;
    .pic {
      width: 100%;
      height: 2.31rem;
    }
    .city {
      position: absolute;
      padding: 0 0.05rem;
      height: 0.18rem;
      text-align: center;
      line-height: 0.18rem;
      background-image: linear-gradient(-45deg, rgba(38, 38, 38, 0.8), rgba(70, 68, 65, 0.8));
      right: 0.1rem;
      top: 0.05rem;
      color: #fefefe;
      font-size: 0.12rem;
      border-radius: 0.02rem;
    }
    div {
      width: 100%;
      height: 1.36rem;
      box-sizing: border-box;
      padding: 0.08rem 0.11rem 0.11rem 0.11rem;
      p {
        line-height: 0.2rem;
        height: 0.4rem;
        color: #232323;
        font-size: 0.14rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-align: left;
        img {
          width: 0.33rem;
          height: 0.17rem;
          display: inline-block;
        }
      }
      span {
        width: 100%;
        height: 0.2rem;
        margin-top: 0.04rem;
        line-height: 0.2rem;
        display: block;
        text-align: left;
      }
      span:nth-of-type(1) {
        color: #666666;
        font-size: 0.14rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:nth-of-type(2) {
        color: #ff6743;
        font-size: 0.15rem;
        b {
          font-weight: normal;
          font-size: 0.12rem;
          color: #999999;
        }
      }
      span:nth-of-type(3) {
        b {
          float: left;
          padding: 0 0.05rem;
          height: 0.18rem;
          line-height: 0.18rem;
          background: #FFF1D5;
          color: #FF6743;
          font-size: 0.12rem;
          font-weight: normal;
          border-radius: 0.05rem;
        }
      }
    }
  }
  li:nth-of-type(2n-1) {
    margin-right: 2%;
  }
}
.backtop {
  position: fixed;
  right: 0.1rem;
  bottom: 0.55rem;
  width: 0.36rem;
  height: 0.36rem;
  background-color: red;
}
.goTop {
  position: fixed;
  right: 0;
  bottom: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  z-index: 20;
  .goTop_pic {
    width: 0.4rem;
    height: 0.4rem;
  }
}
/deep/ .van-nav-bar {
  border-bottom: 1px solid #ebebeb;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: #232323;
}
/deep/ .van-icon-ellipsis {
  font-size: 0.2rem;
  color: #232323;
}
/deep/ .van-tabs__line {
  z-index: 0;
}
/deep/ .van-tab__pane {
  text-align: center;
}
/deep/ .van-tabs {
  margin-top: 0.44rem;
}
</style>
